<template>
    <div class="out_box">
        <headers />

        <div class="content_box">
            <div class="type_box">
                <img class="img" src="@assets/imgs/main/currency_1.png" />
                <p class="name">BTC/BCH</p>
                <p class="desc">圈内大佬都是从挖矿开始</p>
            </div>
            <div class="buy_box" v-for="item of dataList.records" :key="item.id">
                <div class="content">
                    <div class="introduce cl">
                        <div class="list">
                            <p class="title">{{ item.model }}</p>
                            <p class="desc">了解更多 >></p>
                        </div>
                        <div class="list">
                            <p class="title">{{ item.miniCalculation }}<span class="company"></span></p>
                            <p class="desc">矿机算力/台</p>
                        </div>
                        <div class="list">
                            <p class="title">{{ item.electricCharge }}<span class="company"></span></p>
                            <p class="desc">矿机功耗/台</p>
                        </div>
                        <div class="list">
                            <p class="title">{{ item.theoreticalEarnings }}<span class="company"></span></p>
                            <p class="desc">单位功耗</p>
                        </div>
                        <div class="list">
                            <div class="border">
                                <p class="title">{{ $calcDate(new Date(), 86400*3, true) }}</p>
                                <p class="desc">开始挖矿时间</p>
                            </div>
                        </div>
                    </div>
                    <div class="price cl">
                        <div class="list relative" v-for="data of item.list" :key="data.id">
                            <p class="name overflow_1">
                                <img class="img" :src="img_url_appSource + data.currency + '.png'" />
                                {{ data.cperiod + '天 ' + data.currencyName + ' 算力套餐' }}
                                <!-- {{ data.cpower + 'TH/s' }} -->
                            </p>
                            <div class="info cl">
                                <div class="info_list">
                                    <div class="text">预估挖矿总产量</div>
                                    <div class="title">
                                        {{ Number(data.dayYield * data.cperiod).toFixed(6) }}
                                        <span class="company">{{ data.currency }}</span>
                                    </div>
                                </div>
                                <div class="info_list">
                                    <div class="text">套餐总价</div>
                                    <div class="title">{{ '$ ' + Number(data.onprice).toFixed(2) }}</div>
                                </div>
                            </div>
                            <div class="progess">
                                <p>已售{{ buyPercent(data)[0] + '%' }}</p>
                                <!-- <span class="value relative"></span> -->
                                <v-progress-line class="theme_bg" :percent="buyPercent(data)[1]" :show-info="false" :stroke-width="7" normalColor="#2744FF"></v-progress-line>
                            </div>
                            <div class="btn" @click="jumpBuy({ id: data.id }, data)" :style="'background:' + (data.state === '4' ? '#DDD;' : ';')">立即购买</div>
                            <div :class="['label_span']">
                                <div class="c"></div>
                                <span class="label_text status_1" v-show="data.state === '1'">热销</span>
                                <span class="label_text status_2" v-show="data.state === '2'">预售</span>
                                <span class="label_text status_3" v-show="data.state === '3'">体验</span>
                                <span class="label_text status_4" v-show="data.state === '4'">售罄</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footers />
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';
    import { getHashRate } from '@doapis/orders/orders.js';

    export default {
        name: "HashRate",
        components: {
            Headers,
            Footers
        },
        data: function() {
            return {
                dataList: []
            }
        },
        methods: {
            jumpBuy: function(params, data) {
                let state = data.state;
                if (state !== '4') {
                    this.$router.push({ path: '/hash_rate/detail', query: params});
                }
                // else if (state === '2') {
                //     this.$modal.warning({
                //         title: '操作提示！！',
                //         content: '预售中，敬请等待！！',
                //     });
                // }
            },
            getData: function() {
                const that = this;
                const query = this.$route.query;
                getHashRate({ currency: query.currency }).then(function(res) {
                    that.dataList = res.data;
                });
            },
            // 获取购买数量的百分比
            buyPercent: function(data) {
                if ($.$testNotUndefined(data.totalRelease, data.surplus)) {
                    return [
                        Number(((data.totalRelease - data.surplus) / data.totalRelease * 100).toFixed(2)),
                        Number((data.surplus / data.totalRelease * 100).toFixed(2)),
                    ];
                } else {
                    return 0;
                }
            },
            $calcDate: $.$calcDate
        },
        mounted: function() {
            this.getData();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .content_box{
        .type_box{
            padding: 50px 0;
            text-align: center;
            background: black url('~@assets/imgs/common/currency_title_bg.jpg') no-repeat left bottom / 100% auto;
            .img{
                width: 60px;
            }
            .name{
                margin: 5px 0;
                font-size: 20px;
                color: white;
            }
            .desc{
                font-size: 10px;
                line-height: 10px;
                color: white;
                opacity: 0.4;
            }
        }
        .buy_box{
            padding: 44px 0;
            background-color: white;
            &:nth-child(2n+1){
                background-color: #F7F7F7;
            }
            .content{
                width: 78%;
                min-width: 880px;
                margin: 0 auto;
            }
            .introduce{
                border-radius: 6px;
                margin-bottom: 44px;
                background-color: white;
                overflow: hidden;
                box-shadow: 0px 6px 10px rgba(41,72,255,0.1);
                .list{
                    width: 20%;
                    float: left;
                    padding: 25px 0;
                    text-align: center;
                    color: @theme_color;
                    box-sizing: border-box;
                    &:first-child{
                        color: white;
                        background: linear-gradient(139deg, #56ccf2 0%, #2948ff 100%);
                        .desc{
                            color: white;
                            opacity: 0.7;
                            cursor: pointer;
                        }
                    }
                    &:last-child{
                        .border{
                            border-left: 1px solid #EEE;
                        }
                        .title{
                            font-size: 15px;
                            color: #333;
                        }
                    }
                }
                .desc{
                    font-size: 10px;
                    color: #999;
                }
            }
            .introduce .title, .price .info_list .title{
                margin-bottom: 15px;
                font-size: 18px;
                font-weight: 700;
                line-height: 22px;
                .company{
                    font-size: 10px;
                }
            }
            .price{
                .flex_row_wrap;
                margin: 0 -16px -20px -16px;
                .list{
                    width: calc(33.33% - 32px);
                    box-sizing: border-box;
                    margin: 0 16px 20px 16px;
                    padding: 20px;
                    border-radius: 6px;
                    background-color: white;
                    box-shadow: 0px 6px 10px rgba(41,72,255,0.1);
                    overflow: hidden;
                    .name{
                        margin-bottom: 20px;
                        font-size: 18px;
                        color: #333;
                        .img{
                            display: inline-block;
                            width: 30px;
                            vertical-align: top;
                        }
                    }
                    .info_list{
                        float: left;
                        color: @theme_color;
                        &:first-child{
                            margin-right: 24%;
                        }
                        .title{
                            margin-bottom: 20px;
                            font-weight: normal;
                        }
                        .text{
                            margin-bottom: 8px;
                            font-size: 13px;
                            color: #999;
                        }
                    }
                }
                .progess{
                    color: @theme_color;
                    margin-bottom: 40px;
                    .value{
                        display: block;
                        width: 100%;
                        height: 8px;
                        margin-top: 4px;
                        border-radius: 34px;
                        background-color: #F7F7F7;
                        overflow: hidden;
                        &:before{
                            content: '';
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            height: 100%;
                            width: 50%;
                            background-color: @theme_color;
                        }
                    }
                }
                .btn{
                    width: 160px;
                    line-height: 27px;
                    margin: 0 auto;
                    padding: 4px 0;
                    font-size: 13px;
                    text-align: center;
                    color: white;
                    .orange_linear_ellipsis_btn;
                    cursor: pointer;
                }
                .label_span{
                    width: 80px;
                    height: 80px;
                    position: absolute;
                    top: -40px;
                    right: -40px;
                    transform: rotate(45deg);
                }
                .label_span .label_text{
                    position: absolute;
                    bottom: 0;
                    display: block;
                    font-size: 10px;
                    color: #fff;
                    background-color: #36A8FF;
                    width: 80px;
                    text-align: center;
                    &.status_1{
                        background-color: @color_orange;
                    }
                    &.status_2{
                        background-color: @theme_color;
                    }
                    &.status_3{
                        background-color: @color_green;
                    }
                    &.status_4{
                        background-color: #DDD;
                    }
                }
            }
        }
    }
</style>
